<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			background: #fff;
			background-attachment: fixed;
			cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/normal.cur), auto;
			padding: 0;
			margin: 0;
			height: 100vh;
			width: 100%;
		}

		.box {
			width: 32%;
			float: left;
			border: 1px solid #ececec;
			padding: 10px 30px;
			margin: 4px 4px;
			position: relative;
			overflow: hidden;
			-webkit-transition: all .3s;
			transition: all .3s;
			border-radius: 10px;
		}

		.box::before {
			content: "";
			background-color: orange;
			-webkit-transform: skew(45deg, 0);
			transform: skew(45deg, 0);
			width: 0;
			height: 100%;
			position: absolute;
			top: 0;
			left: -60px;
			z-index: -1;
			-webkit-transition: all .5s;
			transition: all .5s;
			background: #FE9600;
			opacity: .2;
		}


		a {
			color: #e67474;
			outline: 0;
			-webkit-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
			-moz-transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
			transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out;
		}

		a {
			background-color: transparent;
			text-decoration: none;
			cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur), auto;
		}

		.box img {
			float: right;
			box-shadow: inset 0 0 10px #000;
			padding: 5px;
			opacity: 1;
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transition: all ease 1s;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			margin-top: 5px;
			width: 65px;
			height: 65px;
			padding: 2px;
			border-radius: 100%;

		}

		.lazyload {
			-webkit-filter: blur(0px);
			-moz-filter: blur(0px);
			-ms-filter: blur(0px);
			filter: blur(0px);
			-webkit-transition: .3s -webkit-filter linear;
			-moz-transition: .3s -moz-filter linear;
			-moz-transition: .3s filter linear;
			-ms-transition: .3s -ms-filter linear;
			-o-transition: .3s -o-filter linear;
			transition: .3s filter linear, .3s -webkit-filter linear;
		}

		img {
			height: auto;
			max-width: 100%;
		}

		.box:hover img {
			/* transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			-ms-transform: rotate(360deg); */
			transform: rotate(666turn);
			transition-delay: 1s;
			transition-property: all;
			transition-duration: 59s;
			transition-timing-function: cubic-bezier(.34, 0, .84, 1);
		}




		span {
			color: orange;
			padding-bottom: 10px;
			display: block;
			-webkit-transition: all .3s;
			transition: all .3s;
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			white-space: nowrap;
		}

		.a {
			color: #949494;
			font-size: 13px;
			padding: 10px 0;
			border-top: 1px dashed #ddd;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			line-height: 25px;
			-webkit-transition: all .5s;
			transition: all .5s;
		}

		a:hover,
		a:active {
			color: orange;
		}

		.box:hover {
			color: #27323a;
			border: 1px solid orange;
		}

		.box:hover::before {
			width: 180%;
		}
	</style>
	<body>
		<div class="box">
			<a>
				<img class="lazyload" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" />
			</a>
			<span>susu</span>
			<div class="a">苏苏就是小苏苏</div>
		</div>
	</body>
</html>
